<template>
    <div class="content">
        <TableLayout form-title="">
            <!-- search 模糊查询 -->
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formAuthor"  ref="authorForm" class="formAuthor" label-width="100px" slot="form" label-position="right">       
                <el-row>
                    <el-col :span="8" class="myAuthor">
                        <el-form-item label="角色名称" prop="sName">
                            <el-autocomplete 
                                class="remote-select" 
                                v-model="formAuthor.sName" 
                                :fetch-suggestions="querySearchAsync" 
                                @select="handleSelect" 
                                placeholder="请输入角色名称"
                                :trigger-on-focus="false"
                            ></el-autocomplete>
                        </el-form-item>
                    </el-col>
                    <div class="formBtn">
                        <div class="btnPosition">
                            <el-button type="primary" class="btn-common" @click="onSearchAuthor">查询</el-button>
                        </div>
                    </div>
                </el-row>
            </el-form>
            <!-- 批量删除 -->
            <div class="table-title" slot="table-title">
                 <div class="btnPosition">
                    <!-- <el-button @click="deleteRole">批量删除</el-button> -->
                    <el-button @click="goToaddAuthor">添加角色</el-button>
                </div>
            </div>
            
            <!-- 权限查询列表 -->
            <el-table 
                ref="multipleTable"
                border
                style="width: 100%" 
                :data="dataAuthor" 
                @selection-change="handleSelectionChange" 
                v-loading="dataLoading"
            >
                <el-table-column align="center" label="角色名称" prop="sName"></el-table-column>
                <el-table-column align="center" label="备注" prop="sDesc"></el-table-column>
                <el-table-column align="center" label="修改时间" prop="sUpdateTime"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template scope="scope">
                        <span v-if="scope.row.menuEditEnabled" class="btn btn-edit" @click="goToeditAuthor(scope.row, scope.row.editEnabled)">修改</span>
                        <span v-if="scope.row.editEnabled" class="btn btn-del" @click.prevent="deleteAuthor(scope.$index, scope.row)">删除</span>
                        <span v-if="!scope.row.editEnabled&&!scope.row.menuEditEnabled" class="btn" @click.prevent="showAuthor(scope.row)">详情</span>
                    </template>
                </el-table-column>                 
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageConfig.total"
                    :current-page.sync="pageConfig.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
<script>
import { getPageSysRole, getListSysRoleByUserRoleType, removeSysRole } from 'api/system.js';
import TableLayout from 'components/TableLayout';
import { mapGetters, mapState, mapActions } from 'vuex';
export default {
    name: 'searchAuthorList',
    data() {
        return {
            // 搜索的表单author
            formAuthor: {
                sName: ''
            },
            // 表数据
            dataAuthor: [], // 查询所有的列表
            dataLoading: true, // 列表数据请求
            pageConfig: { // 分页设置
                page: 1,
                total: 0
            },
            timeout: null,
            selectLoading: false, // 模糊搜索的loading
            authorSearchList: [], // 模糊搜索的样式
            multipleSelection: [], // 选中的元素
            authorGetList: [],
            sortName: 's_update_time',
            sortOrder: 'desc'
        };
    },
    computed: {
        // 获取配置参数
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
        }),
        // 获取用户id
        ...mapGetters(['uid'])
    },
    created() {
        // 获取权限列表数据
        this._getPageSysRole();
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            console.log(val, 'val -----');
            val && this._getPageSysRole();
        }
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        // 模糊搜索
        querySearchAsync(query, cb) {
            if (query) {
                getListSysRoleByUserRoleType({sName: query}).then(response => {
                    this.authorGetList = response.data.content;
                    console.log(this.authorGetList)
                }).then(() => {
                    let results = this.authorGetList.filter(this.createStateFilter(query));
                    clearTimeout(this.timeout);
                    this.timeout = setTimeout(() => {
                        cb(results);
                    }, 200 * Math.random());
                });
            } else {
                this.formAuthor.sName = '';
                this.authorGetList = [];
            }
        },
        createStateFilter(queryString) {
            return state => {
                state.value = state.sName;
                return state.sName.indexOf(queryString) >= 0;
            };
        },
        handleSelect() {
            console.log('select');
        },
        // 添加
        goToaddAuthor() {
            this.$router.push({
                path: 'addAuthor'
            });
        },

        // 删除
        deleteAuthor(index, rows) {
            let confirmMsg = `确定要删除角色【${rows.sName}】`;
            this.$confirm(confirmMsg, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
            .then(() => {
                var removeData = [{'pId': rows.pId}];
                this.removeAuthorityList(removeData);
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 执行公共的删除方法
        removeAuthorityList(data) {
            removeSysRole(JSON.stringify(data)).then(response => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this._getPageSysRole();
            });
        },
        // 修改
        goToeditAuthor(row, flag) {
            this.$router.push({
                path: `editAuthor/${row.pId}`
                // params: {
                //     pId: row.pId
                // }
            });
        },
        showAuthor(row) {
            console.log(row);
            // debugger;
            this.$router.push({
                path: `showAuthor/${row.pId}`
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 查询角色名称
        onSearchAuthor() {
            this.dataLoading = true;
            this._getPageSysRole();
        },
        // 筛选框选择
        selectable(rows) {
            return rows.editEnabled;
        },
        // 分页
        handleSizeChange(val) {
            this.dataLoading = true;
            this.ChangePageSize(val);
            this._getPageSysRole();
        },
        handleCurrentChange(val) {
            this.dataLoading = true;
            this.pageConfig.page = val;
            this._getPageSysRole();
        },
        // 获取首页数据
        _getPageSysRole() {
            let sortName = this.sortName;
            let sortOrder = this.sortOrder;
            let page = this.pageConfig.page;
            let sName = this.formAuthor.sName;
            let rows = this.config.pageSize;
            let instId = 0;
            getPageSysRole({
                sName,
                instId,
                pagination: {
                    page,
                    rows,
                    sortOrder,
                    sortName
                }
            }).then((res) => {
                this.dataLoading = false;
                this.dataAuthor = res.data.content.list;
                this.pageConfig.total = res.data.content.pagination.total;
            });
        }
    },
    components: {
        TableLayout
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.content {
  .formAuthor {
    padding-bottom: 5px;
    .formBtn {
      display: inline-block;
      margin-left: 20px;
      position: relative;
      float: right;
    }
  }
  .remote-select {
    width: 100%;
  }
  .cell {
    .btn {
      -webkit-user-select: none;
      user-select: none;
      cursor: pointer;
      margin: 0 10px;
      color: #37a3fd;
    }
  }
}
</style>

